<template>
  <div class="home-wrap">
    <main>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </main>
    <footer>
      <van-tabbar route>
        <van-tabbar-item
          replace
          v-for="(item, index) in footerData"
          :key="index"
          :to="item.path"
          :icon="item.meta.icon"
          >{{ item.meta.title}}</van-tabbar-item
        >
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      footerData: [],
    };
  },
  created() {
    this.footerData = this.$router.getRoutes().filter(item=> item.meta.second)
  },
};
</script>

<style lang="scss">
.home-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
  }
  footer {
    width: 100%;
    height: 50px;
    background-color: pink;
  }
}
</style>